<template>
  <a-modal :open="open" width="680px" title="挂号签到" centered :footer="false" @cancel="onCancel">
    <div class="sign-header flex items-center mt-12">
      <div class="flex items-center justify-between w-[95%] text-white relative pl-24">
        <img src="@/assets/images/signImg.png" class="w-[70px] h-[80px] absolute -top-12 left-3.5" alt="" />
        <div>{{ rowData?.brName || '-' }}</div>
        <div>{{ rowData?.brXb || '-' }}</div>
        <div>{{ rowData?.brAge || '-' }}</div>
        <div class="flex items-center">
          <img src="@/assets/images/phoneIcon.png" class="mr-1" />
          <div>{{ rowData?.brMob || '-' }}</div>
        </div>
        <div class="flex items-center">
          <img src="@/assets/images/blockIcon.png" class="mr-1" />
          <div>{{ rowData?.brId || '-' }}</div>
        </div>
      </div>
    </div>
    <div class="flex justify-between px-2 mt-3">
      <div>
        <div class="sign-box">
          <span>科室：</span>
          <span class="font-semibold">{{ rowData?.ksmc || '-' }}</span>
        </div>
        <div class="sign-box">
          <span>就诊时间：</span>
          <span class="font-semibold">{{ rowData?.ghTimePeriod || '-' }}</span>
        </div>
        <div class="sign-box">
          <span>挂号费：</span>
          <span class="font-semibold">￥{{ rowData?.zfy || '-' }}</span>
        </div>
      </div>
      <div>
        <div class="sign-box">
          <span>类别：</span>
          <span class="font-semibold">{{ rowData?.ghlb || '-' }}</span>
        </div>
        <div class="sign-box">
          <span>就诊地址：</span>
          <span class="font-semibold">{{ rowData?.gzdd || '-' }}</span>
        </div>
        <div class="sign-box">
          <span>挂号提交时间：</span>
          <span class="font-semibold">{{ rowData?.ghsj || '-' }}</span>
        </div>
      </div>
      <div>
        <div class="sign-box">
          <span>医生：</span>
          <span class="font-semibold">{{ rowData?.empName || '-' }}</span>
        </div>
      </div>
    </div>
    <div class="flex justify-center mt-10">
      <a-button type="primary" class="w-[110px] h-[38px]" @click="onClickSign">签到</a-button>
    </div>
  </a-modal>
</template>
<script setup>
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const onClickSign = async () => {
  const { code, msg } = await post('/outp/mzdj/registrationCheckIn', { jzbh: props.rowData?.jzbh })
  if (code !== 0) return message.error(msg)
  message.success(msg || '签到成功')
  onCancel()
  emit('success')
}

const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
.sign-header {
  width: 100%;
  height: 80px;
  background-image: linear-gradient(to right, #3758f1, #8498f4);
  border-radius: 15px;
}

.sign-box {
  @apply flex  items-center  mt-2;
}
</style>
